<template>
  <div>
    <el-dialog title="个性化展示"
      :visible.sync="dialogVisible"
      width="90%"
      top="2vh"
      @close.native="cancel"
      :close-on-click-modal="false">
      <el-row :gutter="20">
        <el-col :span="8"
          v-for="(item, index) in selectList"
          :key="index">
          <div class="card">
            <el-select style="width: 100%;"
              v-model="item.code"
              placeholder="请选择"
              @change="changeSelect($event, item)">
              <el-option v-for="(item, index) in allOption"
                :key="index"
                :label="item.name"
                :value="item.code"
                :disabled="item.disabled">
              </el-option>
            </el-select>
            <div class="chart-box">
              <div class="content-slot">
                <component :is='item.compName'
                  :id="`card${index}`"></component>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer"
        class="dialog-footer">
        <el-button type="primary"
          @click="submitForm"
          size="small">确 定</el-button>
        <el-button @click="
          cancel"
          size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Card from './common/card.vue'
import MiddleBox from './common/middleBox.vue'
import ProjectComp from './common/projectComp.vue'
import AchievementTrans from './common/achievementTrans.vue'
import DomainComp from './common/domainComp.vue'
import OverallLine from './common/overallLine.vue'
import BorrowHotList from './common/borrowHotList.vue'
import ResultsBy from './common/resultsBy.vue'
import FundExpend from './common/fundExpend.vue'
import GuideComp from './common/guideComp.vue'
import RiskWarning from './common/riskWarning.vue'
import ProjectProgress from './common/projectProgress.vue'
import PurchaseContract from './common/purchaseContract.vue'
import ProjectList from './common/projectList.vue'
// import { updateCurrentConfig } from '@/api/chart'
export default {
  components: {
    MiddleBox,
    Card,
    ProjectComp,
    AchievementTrans,
    DomainComp,
    OverallLine,
    BorrowHotList,
    ResultsBy,
    FundExpend,
    GuideComp,
    RiskWarning,
    ProjectProgress,
    PurchaseContract,
    ProjectList
  },
  data() {
    return {
      dialogVisible: false,
      allOption: [],
      selectList: []
    }
  },
  methods: {
    show(obj) {
      this.allOption = []
      this.selectList = []
      this.dialogVisible = true
      this.allOption = JSON.parse(JSON.stringify(obj.allCheckList))
      obj.checkList.forEach((el, index) => {
        el.showPriority = index + 1
        this.selectList.push(el)
      })
      this.changeSelect()
    },
    changeSelect(val, item) {
      this.allOption.forEach(ele => {
        if (ele.code == val) {
          item.compName = ele.compName
          item.name = ele.name
        }
      })
      const types = []
      this.selectList.forEach(item => {
        if (item.code) {
          types.push(item.code)
        }
      })
      this.allOption.forEach(item => {
        if (types.indexOf(item.code) !== -1) {
          item.disabled = true
        } else {
          item.disabled = false
        }
      })
    },
    cancel() {
      this.dialogVisible = false
      this.allOption = []
      this.selectList = []
      this.$emit('cancelChart')
    },
    submitForm() {
      // updateCurrentConfig({ dataList: this.selectList }).then(() => {
      this.cancel()
      // })
    }
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-dialog {
  background: linear-gradient(180deg, #00398e 0%, #00367c 100%);
  .card {
    // background: pink;
    height: 34vh;
    margin-bottom: 20px;
    // padding: 0 20px 20px;
    overflow: hidden;
  }
  .el-dialog__header {
    border: none;
    .el-dialog__title {
      color: #fff;
    }
  }
}
.chart-box {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(4, 34, 73, 0) 0%, #031e42 100%);
}
.content-slot {
  width: 100%;
  height: 100%;
  transform: scale(0.8);
}
::v-deep .el-select .el-input__inner {
  background: linear-gradient(270deg, rgba(6, 31, 65, 0) 0%, #065cba 100%);
  color: #fff;
  border: none;
}
</style>